<template>
  <div class="amap">
    <el-amap-search-box class="search-box" :default="defaultValue" :search-option="searchOption" :on-search-result="onSearchResult" />
    <el-amap ref="map" vid="amapDemo" :amap-manager="amapManager" :events="events" :center="mapCenter" :zoom="zoom" class="amap-demo">
      <el-amap-marker key="100" :position="mapCenter" />
    </el-amap>
  </div>
</template>

<script>
import Vue from 'vue'
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
window._AMapSecurityConfig = {
  securityJsCode: 'bb744ba2cc49c6aa08ee5eb9325898c7'
}
VueAMap.initAMapApiLoader({
  key: '81f1a41dca26cc0b2b2e37e07b20672d', // 高德开放平台申请的key值
  plugin: [
    'AMap.Autocomplete', // 输入提示插件
    'AMap.PlaceSearch', // POI搜索插件
    'AMap.Scale', // 右下角缩略图插件 比例尺
    'AMap.OverView', // 地图鹰眼插件
    'AMap.ToolBar', // 地图工具条
    'AMap.Geolocation', // 定位控件，用来获取和展示用户主机所在的经纬度位置
    'AMap.Geocoder' // 逆地理编码,通过经纬度获取地址所在位置详细信息
    // 根据需求选用
  ],
  uiVersion: '1.0.11', // 地图ui版本
  v: '1.4.4' // amap版本
})

import { AMapManager } from 'vue-amap'
const amapManager = new AMapManager()

export default {
  name: 'Amap',
  props: {
    center: {
      type: Array,
      default: () => []
    }
  },
  data() {
    const that = this
    return {
      amapManager,
      zoom: 15,
      mapCenter: [115.562302, 28.850217],
      searchOption: {
        // 限制搜索城市的范围
        citylimit: false
      },
      defaultValue: '',
      searchResult: {
        adcode: '',
        name: '',
        address: '',
        latitude: '',
        longitude: '',
        type: '',
        country: '',
        province: '',
        provinceCode: '',
        city: '',
        cityCode: '',
        area: '',
        township: '',
        street: '',
        neighborhood: '',
        locationName: ''
      },
      events: {
        click: e => {
          // console.log(e, '----e')
          this.mapCenter = [e.lnglat.lng, e.lnglat.lat]
          this.searchResult.longitude = e.lnglat.lng
          this.searchResult.latitude = e.lnglat.lat
          this.getAddress(that.mapCenter)
        }
      }
    }
  },
  computed: {},
  watch: {
    center(val) {
      // console.log(val, '-------')
      if (val.length > 0) {
        this.mapCenter = val
      } else {
        this.mapCenter = [115.562302, 28.850217]
      }
    }
  },
  mounted() {
    // const map = this.amapManager.getMap()
    // console.log(map)
  },
  methods: {
    onSearchResult(pois) {
      // console.log(pois, '----pois')
      this.defaultValue = ''
      // 搜索
      if (pois && pois.length > 0) {
        // 如果长度为1则无需转化
        const poi = pois[0]
        const lng = poi['lng']
        const lat = poi['lat']
        this.mapCenter = [lng, lat]
        this.zoom = 18
        this.searchResult.name = poi.name
        this.searchResult.address = poi.address
        this.searchResult.latitude = poi.lat
        this.searchResult.longitude = poi.lng
        this.getAddress(this.mapCenter)
      } else {
        this.searchResult = []
      }
    },
    // 获取详细地址
    getAddress(mapCenter) {
      const geocoder = new AMap.Geocoder({})
      geocoder.getAddress(mapCenter, (status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          const obj = result.regeocode.addressComponent
          // console.log(obj, '----obj')
          Object.assign(this.searchResult, obj)
          this.searchResult.locationName = obj.province + obj.city + obj.district + obj.township + obj.street + obj.streetNumber
          this.searchResult.provinceCode = obj.adcode.slice(0, 2) + '0000'
          this.searchResult.cityCode = obj.adcode.slice(0, 4) + '00'
          this.searchResult.townCode = obj.adcode
          this.$emit('mapParams', this.searchResult)
        }
      })
    }
  }
}
</script>
<style  lang="scss">
.amap {
  margin-top: 10px;
  .el-vue-search-box-container {
    position: absolute;
    margin: 10px;
  }
  .amap-demo {
    height: 300px;
  }
  .amap-logo {
    display: none;
    opacity: 0 !important;
  }
  .amap-copyright {
    opacity: 0;
  }
}
</style>
